<template>
  <div class="dialog">
    <el-dialog
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="false"
      width="55%"
      top="20vh"
      @close="closeDialog"
    >
      <el-form
        :model="createForm"
        label-width="120px"
        label-suffix=":"
        class="searchw"
        ref="createForm"
        :rules="rule"
      >
      <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="图片" prop="imgUrl" class="pictu">
               <!-- <el-upload class="upload-demo" ref="upload" action list-type="picture" :file-list="fileList"
                  :on-change="fileChange" :disabled="!isupload " accept="png,jpg"
                  :before-remove="beforeRemove">
                  <img v-if="createForm.imgUrl" :src="createForm.imgUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload> -->
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :file-list="fileList"
                  :disabled="isupload"
                  accept="png,jpg"
                  :before-remove="beforeRemove"
                  :auto-upload="false"
                >
                  <i slot="default" class="el-icon-plus"></i>
                  <div slot="file" slot-scope="{ file }">
                    <img
                      class="el-upload-list__item-thumbnail"
                      :src="file.url"
                      alt=""
                    />
                    <span class="el-upload-list__item-actions">
                      <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)"
                      >
                        <i class="el-icon-zoom-in"></i>
                      </span>
                    </span>
                  </div>
                </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="配件名称" prop="name">
              <el-input
                v-model.trim="createForm.name"
                placeholder="请输入配件名称"
                 :disabled="title == '配件详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="配件属性" prop="classifyId">
              <!-- <el-select
                v-model="createForm.classifyId"
                size="medium"
                placeholder="请选择配件属性"
                filterable
                 :disabled="title == '配件详情'"
              >
                <el-option
                  v-for="item in classifyList"
                  :key="item.id"
                  :label="item.name + ' - ' + item.parentName"
                  :value="item.id"
                />
              </el-select> -->
              <el-cascader
                style="width:100%"
                v-model="createForm.classifyId"
                :options="classifyTreeData"
                :disabled="title == '配件详情'"
                :props="{
                    value:'id',
                    label:'lableName',
                    children:'childList',
                    emitPath:false
                  }"
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="英文代号" prop="enCode">
              <el-input
                v-model.trim="createForm.enCode"
                placeholder="请输入英文代号"
                :disabled="title == '配件详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="英文名称" prop="enName">
              <el-input
                v-model.trim="createForm.enName"
                placeholder="请输入英文名称"
                 :disabled="title == '配件详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="详情地址" prop="detailUrl">
              <el-input
                v-model.trim="createForm.detailUrl"
                placeholder="请输入详情地址"
                 :disabled="title == '配件详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品id" prop="materialId">
              <el-input
                v-model.trim="createForm.materialId"
                type="number"
                placeholder="请输入产品id"
                 :disabled="title == '配件详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="12">
            <el-form-item label="OE号" prop="oeNumber">
              <el-input
                v-model.trim="createForm.oeNumber"
                placeholder="请输入OE号"
                 :disabled="title == '配件详情'"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="参数" prop="parameter">
              <el-input
                type="textarea"
                :rows="1"
                v-model.trim="createForm.parameter"
                placeholder="请输入参数"
                 :disabled="title == '配件详情'"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog()">关 闭</el-button>
        <el-button
          type="primary"
          @click="confirmData('createForm')"
          v-if="title != '配件详情'"
          >保 存</el-button
        >
      </div>
    </el-dialog>
     <el-dialog :visible.sync="dialogVisible" append-to-body>
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
import {
  getCarClassifyList,
  uploadFile
} from '@/api/carLine'
export default {
  name: 'addBrand',
  props: {
    row: {
      type: Object,
      default: {}
    },
    title: {
      type: String,
      default: ''
    },
    value: {
      type: Boolean,
      default: false
    },
    classifyTreeData:{
      type: Array,
      default: []
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      fileList: [],
      classifyList:[],
      isupload: true,
      visible: true,
      createForm: {
        classifyId: "",
        detailUrl: "",
        enCode: "",
        enName: "",
        id: "",
        imgUrl: "",
        materialExtendId: "",
        materialId: "",
        name: "",
        oeNumber: "",
        parameter: "",
      },
      rule:{
        name: [
          { required: true, message: '请输入配件名称', trigger: 'blur' },
        ],
        classifyId:[
          { required: true, message: '请选择配件属性', trigger: 'change' },
        ],
        enCode: [
          { required: true, message: '请输入英文代号', trigger: 'blur' },
        ],
        enName: [
          { required: true, message: '请输入英文名称', trigger: 'blur' },
        ],
        detailUrl: [
          { required: true, message: '请输入详情地址', trigger: 'blur' },
        ],
        materialId: [
          { required: true, message: '请输入产品id', trigger: 'blur' },
        ],
        oeNumber: [
          { required: true, message: '请输入OE号', trigger: 'blur' },
        ],
      }
    }
  },
  created() {
    this.getTopParentList();
    if(this.row.id){
      this.createForm = this.row;
      this.fileList.push({
        url: this.row.imgUrl,
      })
    }
  },
  mounted() {},
  methods: {
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
     /**
     * 获取配件分类的树形数据
     */
     getTopParentList() {
      let param = {
        page: 1,
        size: 1000
      }
      getCarClassifyList(param)
        .then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.classifyList = data.content
          } else {
            this.$message.error('获取配件分类失败')
          }
        })
        .catch(() => {
          this.$message.error('服务器繁忙')
        })
    },
     /**
     *  上传头像
     */
     fileChange (file, fileList) {
      this.isupload = false;
      let data = new FormData();
      data.append("biz", 'material');
      data.append("file", fileList[0].raw);
        uploadFile(data)
          .then((res) => {
            if (res.data.code == 0) {
              this.createForm.imgUrl = res.data.data.remoteUrl;
              this.fileList = []
              this.isupload = true;
            } else {
              this.$openMessage(res.data.message, 'error');
              this.isupload = true;
            }
          })
          .catch((error) => {
            this.isupload = true;
          });
    },
    /**
     * 上传文件前
     */
    beforeRemove () {
      this.fileList = []
    },
   confirmData(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid) {
          this.$emit('ok', this.createForm)
        }
      })
    },
    closeDialog() {
      this.$emit('cancle')
    }
  }
}
</script>
<style scoped lang="less">
.pictu {
    ::v-deep .el-upload--picture {
      width: 100px !important;
      height: 100px !important;
      line-height: 100px !important;
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
    }

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }

    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  }</style>
